<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form>
        <el-row>
          <el-col :span="4">
            <el-form-item label="子系统名">
              <el-input v-model="subSystemQuery.name" style="width: 100px;" class="filter-item" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="子系统代码">
              <el-input v-model="subSystemQuery.code" style="width: 100px;" class="filter-item" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="子系统备注">
              <el-input v-model="subSystemQuery.remark" style="width: 100px;" class="filter-item" />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button v-waves :loading="loading" class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">
              查询
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus" @click="openAddDialog">
        增加
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-copy-document" @click="handleCopy">
        复制
      </el-button>
      <el-button type="danger" style="margin-left: 10px;" class="filter-item" icon="el-icon-delete" @click="handleDelete">
        删除
      </el-button>
      <el-button v-waves style="margin-left: 10px;" :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-edit" @click="openEditDialog">
        编辑
      </el-button>
    </div>
    <!-- 子系统展示 -->
    <div class="card-container">
      <el-card v-for="(system, index) in subsystemList" :key="index" :v-modal="subsystemList" class="system-card">
        <CheckBox @input="selectSubsystem(system, $event)" />
        <div class="system-body">
          <el-form label-width="100px">
            <el-form-item>
              <img :src="system.imageUrl" style="width: 40%; height: 40%;">
            </el-form-item>
            <el-form-item label="子系统名称">
              <span>{{ system.name }}</span>
            </el-form-item>
            <el-form-item label="子系统代码">
              <span>{{ system.code }}</span>
            </el-form-item>
            <el-form-item label="子系统备注">
              <span>{{ system.remark }}</span>
            </el-form-item>
          </el-form>
          <div class="button-group">
            <el-button @click="copyTarget(system)">复制</el-button>
            <el-button @click="editTarget(system)">编辑</el-button>
            <el-button :type="startButtonAttributes(system).buttonType" @click="handleStartAndStop(system)">{{ startButtonAttributes(system).buttonText }}</el-button>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 分页功能 -->
    <div class="pagination-container">
      <Pagination
        :current-page="subSystemQuery.pageIndex"
        :page-size="subSystemQuery.pageSize"
        :total="total"
        @current-page-change="handleCurrentPageChange"
      />
    </div>
    <add-dialog ref="addDialog" @add="handleAdd" />
    <edit-dialog ref="editDialog" @edit="handleEdit" />
  </div>
</template>

<script>
import { getSubsystems, getTargetSubsystem } from '@/action/subsystemManagement/subsystemGetAction.js'
import { deleteSelectSystems } from '@/action/subsystemManagement/subsystemDeleteAction.js'
import { changeSystemState, editSubsystem } from '@/action/subsystemManagement/subsystemEditAction.js'
import { addSubSystem, copySubSystem } from '@/action/subsystemManagement/subsystemAddAction'
import AddDialog from './components/subsystemAddDialog.vue'
import EditDialog from './components/subsystemEditDialog.vue'
import CheckBox from '@/components/bosssoftComponents/check-box.vue'
import Pagination from '@/components/bosssoftComponents/pagination.vue'

const defaultSubsystem = {
  id: '',
  name: '',
  code: '',
  remark: '',
  imageUrl: '',
  status: '',
  version: ''
}

export default {
  name: 'ComplexTable',
  components: {
    Pagination,
    AddDialog,
    CheckBox,
    EditDialog
  },
  data() {
    return {
      subsystem: Object.assign({}, defaultSubsystem),
      subsystemList: [],
      // 当前查询状态
      loading: false,
      // 查询内容
      subSystemQuery: {
        // 用户输入的子系统名
        name: '',
        // 用户输入的子系统代码
        code: '',
        // 用户输入的子系统备注
        remark: '',
        // 当前页码
        pageIndex: 1,
        // 每页大小
        pageSize: 4
      },
      total: 0,
      // 被选中的子系统的id
      ids: []
    }
  },
  computed: {
    /**
     * 设置button类型
     */
    startButtonAttributes() {
      return (system) => {
        if (system.status === 0) {
          return { buttonText: '启用', buttonType: 'primary' }
        } else {
          return { buttonText: '停用', buttonType: 'danger' }
        }
      }
    }
  },
  created() {
    getSubsystems(this.subSystemQuery).then(res => {
      this.subsystemList = res.data
      this.total = res.total
    })
  },
  methods: {
    /**
     * 切换页时，更新列表
     * @param newPageIndex 当前页码
     */
    handleCurrentPageChange(newPageIndex) {
      this.subSystemQuery.pageIndex = newPageIndex
      getSubsystems(this.subSystemQuery).then(res => {
        this.subsystemList = res.data
      })
    },
    /**
     * 查询操作
     */
    handleSearch() {
      this.loading = true
      getSubsystems(this.subSystemQuery).then(res => {
        this.loading = false
        this.subsystemList = res.data
        this.total = res.total
      })
    },
    /**
     * 处理启用和停用操作
     */
    handleStartAndStop(system) {
      changeSystemState(system.id).then(res => {
        system.status = 1
        this.$message.success(res)
      }).catch(rej => {
        this.$message.error(rej)
      })
    },
    /**
     * 打开新增对话框
     */
    openAddDialog() {
      this.$refs.addDialog.dialogVisible = true
    },
    /**
     * 打开编辑对话框
     */
    openEditDialog() {
      if (this.ids.length === 1) {
        this.$refs.editDialog.dialogVisible = true
        getTargetSubsystem(this.ids[0].id).then(res => {
          this.$refs.editDialog.formData = res
        }).catch(rej => {
          this.$message.error(rej)
        })
      } else {
        this.$message.error('只能同时编辑一个子系统')
      }
    },
    /**
     * 处理子系统新增操作
     * @param formData 组件传出的表单信息
     */
    handleAdd(formData) {
      addSubSystem(formData).then(res => {
        this.$refs.addDialog.dialogVisible = false
        this.$refs.addDialog.resetForm()
        this.$message.success(res)
        location.reload()
      }).catch(rej => {
        this.$message.error(rej)
      })
    },
    /**
     * 处理复制操作
     */
    handleCopy() {
      copySubSystem(this.ids).then(res => {
        this.$message.success(res)
        location.reload()
      }).catch(rej => {
        this.$message.error(rej)
      })
    },
    /**
     * 选中子系统，放入或移除被选中列表中
     * @param system 被选中的子系统
     * @param isChecked 系统是否被选中
     */
    selectSubsystem(system, isChecked) {
      if (isChecked) {
        this.ids.push({
          id: system.id
        })
      } else {
        const index = this.ids.findIndex(selectedSystem => selectedSystem.id === system.id)
        if (index !== -1) {
          // 如果取消选中，从 ids 数组中移除id信息
          this.ids.splice(index, 1)
        }
      }
    },
    /**
     * 删除勾选中的系统
     */
    handleDelete() {
      this.$confirm('确定要删除这些系统吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteSelectSystems(this.ids).then(res => {
          this.$message.success(res)
          location.reload()
          this.ids = []
        }).catch(rej => {
          this.$message.error(rej)
        })
      })
    },
    /**
     * 处理子系统的编辑操作
     * @param formData 编辑后的表单信息
     */
    handleEdit(formData) {
      editSubsystem(formData).then(res => {
        // 编辑成功后，关闭对话框并重置表单
        this.$refs.editDialog.dialogVisible = false
        this.$refs.editDialog.resetForm()
        this.$message.success(res)
        location.reload()
      }).catch(rej => {
        this.$message.error(rej)
      })
    },
    /**
     * 编辑当前子系统
     */
    editTarget(subsystem) {
      this.$refs.editDialog.dialogVisible = true
      getTargetSubsystem(subsystem.id).then(res => {
        this.$refs.editDialog.formData = res
      }).catch(rej => {
        this.$message.error(rej)
      })
    },
    /**
     * 复制当前子系统
     * @param subsystem
     */
    copyTarget(subsystem) {
      this.$refs.addDialog.dialogVisible = true
      getTargetSubsystem(subsystem.id).then(res => {
        this.$refs.addDialog.formData = res
      }).catch(rej => {
        this.$message.error(rej)
      })
    }
  }
}
</script>

<style scoped>
    .pagination-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .card-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .system-card {
      width: 275px;
      height: 400px;
      margin-top: 20px;
      margin-right: 10px;
      margin-left: 10px;
      margin-bottom: 10px;
    }
</style>
